import React, { useEffect, useState } from 'react';
import {
    Breadcrumb,
    Card,
    Form,
    Input,
    Row,
    Col,
    Select,
    Button,
    List,
    Tag,
    Space,
    Pagination,
} from 'antd';
import {
    PlusOutlined,
    EditOutlined,
    DeleteOutlined,
    SearchOutlined,
} from '@ant-design/icons';

import { MergeRouteComponentProps } from '../../../../router/types';

import { fetchList as fetchSubjectList } from '../../../../http/subject';
import { fetchTypeList as fetchExamTypeList } from '../../../../http/exam';
import {
    fetchTypeList as fetchQuestionTypeList,
    fetchList as fetchQuestionList,
} from '../../../../http/question';

interface IProps extends MergeRouteComponentProps {}

const QuestionPreview: React.FC<IProps> = () => {
    /**
     * 课程列表
     */
    const [subjectList, setSubjectList] = useState([]);

    /**
     * 已选择课程
     */
    const [selectedSubject, setSelectedSubject] = useState<Array<string>>([]);

    /**
     * 考试类型列表
     */
    const [examTypeList, setExamTypeList] = useState([]);

    /**
     * 试题类型
     */
    const [questionTypeList, setQuestionTypeList] = useState([]);

    /**
     * 试题列表
     */
    const [questionList, setQuestionList] = useState([]);

    /**
     * 查询参数
     */
    const [search, setSearch] = useState({
        pagenum: 1,
        pagesize: 10,
        etid: '',
        qtid: '',
        total: 0,
    });

    /**
     * 副作用
     */
    useEffect(() => {
        getSubjectList();
        getExamTypeList();
        getQuestionTypeList();
        getQuestionList();
    }, []);

    /**
     * 已选择课程变化时，做一些事情
     */
    useEffect(() => {
        // console.log("selectedSubject", selectedSubject);
        getQuestionList();
    }, [selectedSubject]);

    /**
     * 请求数据：课程列表
     */
    const getSubjectList = async () => {
        const res = await fetchSubjectList();
        setSubjectList(res.data.data);
    };

    /**
     * 请求数据：考试类型列表
     */
    const getExamTypeList = async () => {
        const res = await fetchExamTypeList();
        setExamTypeList(res.data.data);
    };

    /**
     * 请求数据：试题类型列表
     */
    const getQuestionTypeList = async () => {
        const res = await fetchQuestionTypeList();
        setQuestionTypeList(res.data.data);
    };

    /**
     * 请求数据：试题列表
     */
    const getQuestionList = async () => {
        console.log(
            search.pagenum,
            search.pagesize,
            selectedSubject.join(','),
            search.etid,
            search.qtid
        );
        const res = await fetchQuestionList(
            search.pagenum,
            search.pagesize,
            selectedSubject.join(','),
            search.etid,
            search.qtid
        );
        setQuestionList(res.data.data.list);
        setSearch({ ...search, total: res.data.data.total });
    };

    /**
     * 课程选择节点
     */
    const subjectListNode = subjectList.map((item: any, index) => (
        <Tag.CheckableTag
            key={item.id}
            checked={selectedSubject.includes(item.id)}
            onChange={(checked) => {
                // 新的 checked 数组
                let newCheckedArr = checked
                    ? [...selectedSubject, item.id]
                    : [...selectedSubject.splice(index, 1)];
                // 已选择课程
                setSelectedSubject(newCheckedArr);
            }}
        >
            {item.name}
        </Tag.CheckableTag>
    ));

    return (
        <div className="question-preview">
            {/* 面包屑导航 */}
            <Breadcrumb>
                <Breadcrumb.Item>
                    <a href="">首页</a>
                </Breadcrumb.Item>

                <Breadcrumb.Item>
                    <a href="">试题管理</a>
                </Breadcrumb.Item>

                <Breadcrumb.Item>
                    <a href="">查看试题</a>
                </Breadcrumb.Item>
            </Breadcrumb>

            {/* 试题分类 */}
            <Card>
                <Space direction="vertical" size="large">
                    <Row>
                        <Col>
                            <span>课程类型：</span>
                        </Col>

                        <Col>
                            <Tag.CheckableTag
                                checked={selectedSubject.length === 0}
                                onChange={(checked) =>
                                    checked && setSelectedSubject([])
                                }
                            >
                                全部
                            </Tag.CheckableTag>
                            {subjectListNode}
                        </Col>
                    </Row>

                    <Row gutter={30}>
                        <Col span="10">
                            <span>考试类型：</span>
                            <Select
                                onChange={(v: string) =>
                                    setSearch({ ...search, etid: v })
                                }
                                style={{ width: '60%' }}
                            >
                                {examTypeList.map((item: any) => (
                                    <Select.Option
                                        key={item.id}
                                        value={item.id}
                                    >
                                        {item.name}
                                    </Select.Option>
                                ))}
                            </Select>
                        </Col>

                        <Col span="10">
                            <span>题目类型：</span>
                            <Select
                                onChange={(v: string) =>
                                    setSearch({ ...search, qtid: v })
                                }
                                style={{ width: '60%' }}
                            >
                                {questionTypeList.map((item: any) => (
                                    <Select.Option
                                        key={item.id}
                                        value={item.id}
                                    >
                                        {item.name}
                                    </Select.Option>
                                ))}
                            </Select>
                        </Col>

                        <Col span="4">
                            <Button type="primary" onClick={getQuestionList}>
                                <SearchOutlined /> 查询
                            </Button>
                        </Col>
                    </Row>
                </Space>
            </Card>

            <Card>
                <List
                    header={<div>考题列表</div>}
                    bordered
                    itemLayout="vertical"
                    dataSource={questionList}
                    renderItem={(item: any) => (
                        <List.Item key={item.id}>
                            <h3>{item.title}</h3>

                            <Row>
                                <Tag color="magenta">{item.q_tname}</Tag>
                                <Tag color="volcano">{item.sname}</Tag>
                                <Tag color="orange">{item.e_tname}</Tag>
                            </Row>

                            <Button type="link" style={{ padding: '0px' }}>
                                {item.nickname} 发布
                            </Button>
                        </List.Item>
                    )}
                />

                {/* 分页 */}
                <Row justify="end">
                    <Pagination
                        style={{ marginTop: '20px' }}
                        total={search.total}
                        showSizeChanger
                        showQuickJumper
                        showTotal={(total) => `试题数量：${total}`}
                    />
                </Row>
            </Card>
        </div>
    );
};

export default QuestionPreview;
